<template lang="pug">
  el-drawer.commonDrawer(
  :title="`${!id ? '添加' : '查看'}教保师`"
  :visible="visibleDialog"
  append-to-body
  direction="rtl"
  size="760px"
  destroy-on-close
  @close="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="form"
        cancel-text="返回"
        :fields="addConfig"
        :info.sync="info"
        v-loading="loading"
        :disabled="disabled"
        btnClass="tc"
        :showBtns="false"
      )
        template(slot="form-roleId")
          el-select.w(
          v-model="info.roleId"
          )
            el-option(
            v-for="item in positionList"
            :key="item.roleId"
            :value="item.roleId"
            :label="item.roleName"
            )
    .drawer-footer.tr(v-if="!disabled")
      el-button(size="large" round :loading="submitting" @click="$_handleCancel") 取消
      el-button.gradientVertical(size="large" round :loading="submitting" @click="submitHandle") 确定
</template>
<script>
import { mapGetters } from 'vuex'
import dictMixin from '@/mixins/dict'
import { regs } from '@/utils/validate'
import { submitStaff } from '../../api'
import { getRoleTypes } from '@/api/common.js'
export default {
  mixins: [dictMixin],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      info: {
      },
      positionList: [],
      submitting: false,
      loading: false
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    addConfig () {
      const { info: baseData } = this
      return [
        {
          label: '教保师姓名',
          key: 'realName',
          layoutCol: { sm: 24, md: 24, lg: 24 },
          rules: [{ required: true, message: '请输入' }],
          initialValue: baseData.realName
        },
        {
          label: '手机号',
          key: 'mobile',
          layoutCol: { sm: 24, md: 24, lg: 24 },
          rules: [{ required: true, message: '请输入' }, { pattern: regs.phone, message: '请输入正确的手机号码' }],
          initialValue: baseData.mobile
        },
        {
          label: '性别',
          key: 'gender',
          layoutCol: { sm: 24, md: 24, lg: 24 },
          type: 'radio',
          rules: [{ required: true, message: '请选择' }],
          initialValue: baseData.gender,
          fieldProps: {
            dictKey: 'sex',
            props: { value: 'value', label: 'label' }
          }
        },
        {
          label: '角色',
          key: 'roleId',
          type: 'slot',
          layoutCol: { sm: 24, md: 24, lg: 24 },
          rules: [{ required: true, message: '请选择' }],
          initialValue: baseData.roleId
        }
      ]
    }
  },
  watch: {
    visible: {
      handler (val) {

      }
    }
  },
  created () {
    this.getRole()
  },
  methods: {
    async submitHandle () {
      const values = await this.$refs.form.submitForm()
      console.log(values)
      this.submitting = true
      submitStaff({}, {
        headImgUrl: '',
        ...values
      }, 'post').then(() => {
        this.$message.success('提交成功')
        this.$emit('getList')
        this.$_handleCancel()
      }).finally(() => {
        this.submitting = false
      })
    },

    $_handleCancel () {
      this.visibleDialog = false
    },

    getRole () {
      getRoleTypes().then(res => {
        console.log(res)
        this.positionList = res
      })
    }
  }
}
</script>
